import React, { useEffect, useState } from 'react';
import { getShopsNum, getUsersNum } from '../../api/home';
import { Row, Col, Statistic, Card } from 'antd'
import { UsergroupDeleteOutlined, ShoppingOutlined  } from '@ant-design/icons';
type IndexProps = {}

export const Index = (props: IndexProps) => {
  const [shopsNum, setShopsNum] = useState(0)
  const [usersNum, setUsersNum] = useState(0)
  useEffect(() => {
    Promise.all([getShopsNum(), getUsersNum()]).then(result => {
      console.log(result)
      setShopsNum(result[0].data.data)
      setUsersNum(result[1].data.data)
    })
  
  }, [])
  return  (
    <>
      <Row gutter={16}>
        <Col span={6}>
          <Card>
            <Statistic title="商品总数量：" value={shopsNum} prefix={<ShoppingOutlined /> } />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="用户总数量：" value={usersNum} prefix={<UsergroupDeleteOutlined />}  />
          </Card>
        </Col>
      </Row>
    </>
  );
}